<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03计算器练习</title>
</head>
<body>
<input type="text" id="d1" placeholder="输入数字1"> <br>
<input type="text" id="d2" placeholder="输入数字2"> <br>
<button id="btn1" onclick="calc('+')">加</button>
<button id="btn2" onclick="calc('-')">减</button>
<button id="btn3" onclick="calc('*')">乘</button>
<button id="btn4" onclick="calc('/')">除</button>
<h4>计算结果为:
    <span class="over"></span>
</h4>

<script>
    function calc(n){
        let num1 = parseFloat(document.querySelector('#d1').value);
        let num2 = parseFloat(document.getElementById('d2').value);
        console.log(typeof num1);
        if (num1 && num2){
            var result = 0;
            switch (n){
                case '+':
                    result = num1 + num2;
                    break;
                case '-':
                    result = num1 - num2;
                    break;
                case '*':
                    result = num1 * num2;
                    break;
                case '/':
                    result = num1 / num2;
                    break;
                default:
                    result = '输入有误';
            }
        }
        // result = '输入有误';
        let span = document.querySelector('.over');
        console.log(result)
        span.innerHTML = result;
    }
</script>
</body>
</html>